<template>
  <div class="emoji">
    <img class="emoji-item" :src="emoji.url" :title="emoji.title" v-for="(emoji,index) in emojiArr" :key="index" @click="selectEmoji(emoji)">
  </div>
</template>

<script>
export default {
  name: 'Emoji',
  data () {
    return {
      emojiArr: [
        {
          title: '失望',
          url: '../static/emojis/emoji(70).png'
        },
        {
          title: '汗',
          url: '../static/emojis/emoji(69).png'
        },
        {
          title: '无语',
          url: '../static/emojis/emoji(67).png'
        },
        {
          title: '合十',
          url: '../static/emojis/emoji(38).png'
        },
        {
          title: '吐舌',
          url: '../static/emojis/emoji(30).png'
        },
        {
          title: '强壮',
          url: '../static/emojis/emoji(5).png'
        },
        {
          title: '瓢虫',
          url: '../static/emojis/emoji(12).png'
        },
        {
          title: '微笑',
          url: '../static/emojis/emoji(94).png'
        },
        {
          title: '撇嘴',
          url: '../static/emojis/emoji(31).png'
        },
        {
          title: '破涕为笑',
          url: '../static/emojis/emoji(63).png'
        },
        {
          title: '笑脸',
          url: '../static/emojis/emoji(64).png'
        },
        {
          title: '生病',
          url: '../static/emojis/emoji(91).png'
        },
        {
          title: '色',
          url: '../static/emojis/emoji(25).png'
        },
        {
          title: '发呆',
          url: '../static/emojis/emoji(82).png'
        },
        {
          title: '得意',
          url: '../static/emojis/emoji(26).png'
        },
        {
          title: '流泪',
          url: '../static/emojis/emoji(36).png'
        },
        {
          title: '害羞',
          url: '../static/emojis/emoji(22).png'
        },
        {
          title: '闭嘴',
          url: '../static/emojis/emoji(98).png'
        },
        {
          title: '睡',
          url: '../static/emojis/emoji(32).png'
        },
        {
          title: '大哭',
          url: '../static/emojis/emoji(76).png'
        },
        {
          title: '发怒',
          url: '../static/emojis/emoji(75).png'
        },
        {
          title: '调皮',
          url: '../static/emojis/emoji(29).png'
        },
        {
          title: '呲牙',
          url: '../static/emojis/emoji(62).png'
        },
        {
          title: '惊讶',
          url: '../static/emojis/emoji(87).png'
        },
        {
          title: '难过',
          url: '../static/emojis/emoji(92).png'
        },
        {
          title: '冷汗',
          url: '../static/emojis/emoji(68).png'
        },
        {
          title: '抓狂',
          url: '../static/emojis/emoji(78).png'
        },
        {
          title: '吐',
          url: '../static/emojis/emoji(44).png'
        },
        {
          title: '偷笑',
          url: '../static/emojis/emoji(43).png'
        },
        {
          title: '可爱',
          url: '../static/emojis/emoji(23).png'
        },
        {
          title: '白眼',
          url: '../static/emojis/emoji(96).png'
        },
        {
          title: '傲慢',
          url: '../static/emojis/emoji(71).png'
        },
        {
          title: '饥饿',
          url: '../static/emojis/emoji(24).png'
        },
        {
          title: '困',
          url: '../static/emojis/emoji(33).png'
        },
        {
          title: '惊恐',
          url: '../static/emojis/emoji(83).png'
        },
        {
          title: '流汗',
          url: '../static/emojis/emoji(68).png'
        },
        {
          title: '憨笑',
          url: '../static/emojis/emoji(61).png'
        },
        {
          title: '悠闲',
          url: '../static/emojis/emoji(7).png'
        },
        {
          title: '咒骂',
          url: '../static/emojis/emoji(42).png'
        },
        {
          title: '嘘',
          url: '../static/emojis/emoji(41).png'
        },
        {
          title: '晕',
          url: '../static/emojis/emoji(90).png'
        },
        {
          title: '折磨',
          url: '../static/emojis/emoji(78).png'
        },
        {
          title: '衰',
          url: '../static/emojis/emoji(77).png'
        },
        {
          title: '骷髅',
          url: '../static/emojis/emoji(57).png'
        },
        {
          title: '敲打',
          url: '../static/emojis/emoji(99).png'
        },
        {
          title: '再见',
          url: '../static/emojis/emoji(13).png'
        },
        {
          title: '鼓掌',
          url: '../static/emojis/emoji(19).png'
        },
        {
          title: '糗大了',
          url: '../static/emojis/emoji(65).png'
        },
        {
          title: '坏笑',
          url: '../static/emojis/emoji(35).png'
        },
        {
          title: '左哼哼',
          url: '../static/emojis/emoji(79).png'
        },
        {
          title: '右哼哼',
          url: '../static/emojis/emoji(80).png'
        },
        {
          title: '哈欠',
          url: '../static/emojis/emoji(104).png'
        },
        {
          title: '快哭了',
          url: '../static/emojis/emoji(81).png'
        },
        {
          title: '阴险',
          url: '../static/emojis/emoji(27).png'
        },
        {
          title: '亲亲',
          url: '../static/emojis/emoji(28).png'
        },
        {
          title: '吓',
          url: '../static/emojis/emoji(85).png'
        },
        {
          title: '可怜',
          url: '../static/emojis/emoji(45).png'
        },
        {
          title: '菜刀',
          url: '../static/emojis/emoji(21).png'
        },
        {
          title: '西瓜',
          url: '../static/emojis/emoji(49).png'
        },
        {
          title: '啤酒',
          url: '../static/emojis/emoji(11).png'
        },
        {
          title: '篮球',
          url: '../static/emojis/emoji(1).png'
        },
        {
          title: '乒乓',
          url: '../static/emojis/emoji(2).png'
        },
        {
          title: '咖啡',
          url: '../static/emojis/emoji(111).png'
        },
        {
          title: '饭',
          url: '../static/emojis/emoji(10).png'
        },
        {
          title: '猪头',
          url: '../static/emojis/emoji(55).png'
        },
        {
          title: '玫瑰',
          url: '../static/emojis/emoji(48).png'
        },
        {
          title: '凋谢',
          url: '../static/emojis/emoji(103).png'
        },
        {
          title: '示爱',
          url: '../static/emojis/emoji(56).png'
        },
        {
          title: '爱心',
          url: '../static/emojis/emoji(113).png'
        },
        {
          title: '心碎',
          url: '../static/emojis/emoji(60).png'
        },
        {
          title: '蛋糕',
          url: '../static/emojis/emoji(50).png'
        },
        {
          title: '庆祝',
          url: '../static/emojis/emoji(52).png'
        },
        {
          title: '闪电',
          url: '../static/emojis/emoji(106).png'
        },
        {
          title: '炸弹',
          url: '../static/emojis/emoji(3).png'
        },
        {
          title: '刀',
          url: '../static/emojis/emoji(112).png'
        },
        {
          title: '足球',
          url: '../static/emojis/emoji(107).png'
        },
        {
          title: '便便',
          url: '../static/emojis/emoji(4).png'
        },
        {
          title: '月亮',
          url: '../static/emojis/emoji(47).png'
        },
        {
          title: '太阳',
          url: '../static/emojis/emoji(9).png'
        },
        {
          title: '礼物',
          url: '../static/emojis/emoji(51).png'
        },
        {
          title: '拥抱',
          url: '../static/emojis/emoji(101).png'
        },
        {
          title: '赞',
          url: '../static/emojis/emoji(17).png'
        },
        {
          title: '踩',
          url: '../static/emojis/emoji(18).png'
        },
        {
          title: '握手',
          url: '../static/emojis/emoji(39).png'
        },
        {
          title: '胜利',
          url: '../static/emojis/emoji(109).png'
        },
        {
          title: '抱拳',
          url: '../static/emojis/emoji(37).png'
        },
        {
          title: '拳头',
          url: '../static/emojis/emoji(108).png'
        },
        {
          title: '爱你',
          url: '../static/emojis/emoji(40).png'
        },
        {
          title: 'OK',
          url: '../static/emojis/emoji(15).png'
        },
        {
          title: '爱情',
          url: '../static/emojis/emoji(59).png'
        },
        {
          title: '飞吻',
          url: '../static/emojis/emoji(73).png'
        },
        {
          title: '红包',
          url: '../static/emojis/emoji(8).png'
        },
        {
          title: '发',
          url: '../static/emojis/emoji(6).png'
        },
        {
          title: '耶',
          url: '../static/emojis/emoji(110).png'
        },
        {
          title: 'emm',
          url: '../static/emojis/emoji(66).png'
        },
        {
          title: '皱眉',
          url: '../static/emojis/emoji(46).png'
        },
        {
          title: '好的',
          url: '../static/emojis/emoji(16).png'
        },
        {
          title: '哇',
          url: '../static/emojis/emoji(102).png'
        },
        {
          title: '旺柴',
          url: '../static/emojis/emoji(54).png'
        },
        {
          title: '脸红',
          url: '../static/emojis/emoji(89).png'
        },
        {
          title: '恐惧',
          url: '../static/emojis/emoji(86).png'
        },
        {
          title: '打脸',
          url: '../static/emojis/emoji(100).png'
        },
        {
          title: '鬼魂',
          url: '../static/emojis/emoji(20).png'
        }
      ]
    }
  },
  methods: {
    selectEmoji (emoji) {
      this.$emit('select', emoji.url)
    }
  }
}
</script>
<style>
.emoji{
  width: 384px;
  height: 360px;
  overflow: auto;
  border-radius: 10px;
  background: white;
  margin: 10px;
  box-shadow: 0 0 10px #888;
}
.emoji::-webkit-scrollbar{
  display: none;
}
.emoji .emoji-item{
  width: 28px;
  padding: 5px;
  margin: 5px;
}
.emoji .emoji-item:hover{
  background-color: #f2f2f2;
  border-radius: 5px;
  transform: scale(1.2);
}
</style>
